<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/photoswipe.css"/>
    <title>发表评论</title>
</head>
<body>
	<div id="publish">
		<div class="pubHead">
			<span class="back"></span>
			<span class="title">发表评论</span>
			<span class="pubBtn" onclick="pub()">发布</span>
		</div>
		<div class="pubList">
			<span class="listName">共计<i class="conut">9</i>件商品</span>
			<div class="listGoods">
				<img class="icon" src="images/product1@1x.png"/>
				<img class="icon" src="images/product1@1x.png"/>
				<img class="icon" src="images/product1@1x.png"/>
			</div>
		</div>
		<div class="pubList">
			<span class="listName">描述相符</span>
			<div class="starCon">
				<span><i class="high"></i><i class="nohigh"></i></span>
		        <span><i class="high"></i><i class="nohigh"></i></span>
		        <span><i class="high"></i><i class="nohigh"></i></span>
		        <span><i class="high"></i><i class="nohigh"></i></span>
		        <span><i class="high"></i><i class="nohigh"></i></span>
			</div>
		</div>
		<div class="pubList">
			<textarea name="content" placeholder="宝贝满足你的期待吗？说说它的优点和美中不足的地方吧" class="content"></textarea>
			<div class="addImg">
				<img src="images/icon_xiangji@1x.png"/>
				<span class="name">添加照片</span>
				<input type="file" name="addimg" id="addimg" accept="image/*" multiple onchange="imgChange('imgs','addImg');"/>
			</div>
			<div class="addvideo">
				<img src="images/icon_shipin@1x.png"/>
				<span class="name">添加视频</span>
				<input type="file" name="addvideo" id="addvideo" />
			</div>
			<div class="imgs">
				
			</div>
		</div>
		<!--遮罩层-->
        <div class="z_mask">
            <!--弹出框-->
            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
		<div class="pubList">
			<div class="anonymous">
				<img class="nm" date='0' src="images/btn_choice_normal@1x.png"/>
				<span>匿名</span>
			</div>
			<span class="listDes">你的评价能帮助其他小伙伴呦</span>
		</div>
	</div>
<script type="text/javascript">
	//是否匿名
	$('.anonymous').on('click',function(){
		var check=$(this).find('.nm').attr('data')
        if(check==0){
        	$(this).find('.nm').attr('src','images/btn_chocie@1x.png')
        	$(this).find('.nm').attr('data',1)
        }else{
        	$(this).find('.nm').attr('src','images/btn_choice_normal@1x.png')
        	$(this).find('.nm').attr('data',0)
        }
	})
	//上传图片
	function imgChange(obj1, obj2) {
		$('.quanbox').hide(100)
        //获取点击的文本框50
        var file = document.getElementById("addimg");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        
		
		var tolength=$('.imgs .z_addImg').length;
    	if (tolength <= 8) {
    		console.log(111)
    		for (var i = 0; i < fileList.length; i++) {
	            var imgUrl = window.URL.createObjectURL(file.files[i]);
	            imgArr.push(imgUrl);
	            var img = document.createElement("img");
	            img.setAttribute("src", imgArr[i]);
	            var imgAdd = document.createElement("div");
	            imgAdd.setAttribute("class", "z_addImg");
	            imgAdd.appendChild(img);
	            imgContainer.appendChild(imgAdd);
	        }
    	} else{
    		console.log('超出9张')
    		alert('最多只能上传9张')
    		i=8;
       	}
        ;
        imgRemove();
    };
    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function () {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function () {
                    mask.style.display = "none";
                };
                sure.onclick = function () {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        }
        ;
    };
    
    //评分
    var starRating = 0;
    $('.starCon span').on('mouseenter', function () {
        var index = $(this).index() + 1;
        $(this).prevAll().find('.high').css('z-index', 1)
        $(this).find('.high').css('z-index', 1)
        $(this).nextAll().find('.high').css('z-index', 0)
        $('.starNum').html((index * 1).toFixed(1) + '分')
    })
    $('.starCon').on('mouseleave', function () {
        $(this).find('.high').css('z-index', 0)
        var count = starRating / 1
        if (count == 5) {
            $('.starCon span').find('.high').css('z-index', 1);
        } else {
            $('.starCon span').eq(count).prevAll().find('.high').css('z-index', 1);
        }
//          $('.starNum').html(starRating.toFixed(1) + '分')
    })
    $('.starCon span').on('click', function () {
        var index = $(this).index() + 1;
        $(this).prevAll().find('.high').css('z-index', 1)
        $(this).find('.high').css('z-index', 1)
        starRating = index * 1;
//          $('.starNum').html(starRating.toFixed(1) + '分');
        console.log('评分：' + (starRating.toFixed(1) + '分'))
    })
    //发布评论
    function pub(){
    	var content=$('.content').val()
	  if (starRating === 0) {
            alert('最低一颗星！');
            return false;
        } else if (content =='') {
            alert('内容不可为空');
            return false;
        } else {
              //上传评论数据
              
        }
    }
</script>
</body>
</html>
